import './TechnologicalInnovation.scss'

import dayjs from 'dayjs'
import { useRequest, useSize } from 'ahooks'
import { DatePicker } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { TitleSmall001 } from '../Common/SmallTitle'
import { WebCommonUrl } from '../../../../Common/Configure/CommonParameter'

import { DualAxesStyle, DualAxesA1Template } from './AssetsCharts'
import { ColumnStyle, ColumnConfigA01Template } from './AssetsCharts'
import { AreaStyle, AreaA01Template } from './AssetsCharts'
import { Http } from '../../../../Common/Api'
import { FrontModalBox } from '../Modal'

const InfoTypeList = {
    '1154691c-a87d-40e5-9a33-946fb0bc1001': { type: 'NewSciencesA01ModalList', title: '优质工程' },
    '1154691c-a87d-40e5-9a33-946fb0bc1002': { type: 'NewSciencesA02ModalList', title: 'QC' },
    '1154691c-a87d-40e5-9a33-946fb0bc1003': { type: 'NewSciencesA03ModalList', title: '施工工法' },
    '1154691c-a87d-40e5-9a33-946fb0bc1004': { type: 'NewSciencesA04ModalList', title: '十项新技术' },
    '1154691c-a87d-40e5-9a33-946fb0bc1005': { type: 'NewSciencesA05ModalList', title: '绿色工程' },
    '1154691c-a87d-40e5-9a33-946fb0bc1006': { type: 'NewSciencesA06ModalList', title: 'BIM' },
    '1154691c-a87d-40e5-9a33-946fb0bc1007': { type: 'NewSciencesA07ModalList', title: '专利' },
    '1154691c-a87d-40e5-9a33-946fb0bc1008': { type: 'NewSciencesA08ModalList', title: '参编标准' },
    '1154691c-a87d-40e5-9a33-946fb0bc1009': { type: 'NewSciencesA09ModalList', title: '样板工程' },
    '1154691c-a87d-40e5-9a33-946fb0bc1010': { type: 'NewSciencesA10ModalList', title: '智慧工地' },
    '1154691c-a87d-40e5-9a33-946fb0bc1011': { type: 'NewSciencesA11ModalList', title: '微创新' },
    '1154691c-a87d-40e5-9a33-946fb0bc1012': { type: 'NewSciencesA12ModalList', title: '科学技术成果' },
}
const InfoTypeListMapping = {
    '1154691c-a87d-40e5-9a33-946fb0bc1005': { type: 'NewSciencesA05ModalList', title: '绿色工程' },
    '1154691c-a87d-40e5-9a33-946fb0bc1006': { type: 'NewSciencesA06ModalList', title: 'BIM' },
    '1154691c-a87d-40e5-9a33-946fb0bc1008': { type: 'NewSciencesA08ModalList', title: '参编标准' },
    '1154691c-a87d-40e5-9a33-946fb0bc1009': { type: 'NewSciencesA09ModalList', title: '样板工程' },
    '1154691c-a87d-40e5-9a33-946fb0bc1010': { type: 'NewSciencesA10ModalList', title: '智慧工地' },
    '1154691c-a87d-40e5-9a33-946fb0bc1011': { type: 'NewSciencesA11ModalList', title: '微创新' },
    '1154691c-a87d-40e5-9a33-946fb0bc1012': { type: 'NewSciencesA12ModalList', title: '科学技术成果' },
}

const A01List = [
    {
        uuid: 1,
        InfoTypeUuid: '1154691c-a87d-40e5-9a33-946fb0bc1001',
        title: '优质工程',
        value: '优质工程',
        unit: '项',
        img: 'TechnologicalInnovationA01_A01.png',
    },
    {
        uuid: 2,
        InfoTypeUuid: '1154691c-a87d-40e5-9a33-946fb0bc1002',
        title: 'QC',
        value: 'qc',
        unit: '项',
        img: 'TechnologicalInnovationA01_A02.png',
    },
    {
        uuid: 3,
        InfoTypeUuid: '1154691c-a87d-40e5-9a33-946fb0bc1003',
        title: '施工工法',
        value: '施工工法',
        unit: '项',
        img: 'TechnologicalInnovationA01_A03.png',
    },
    {
        uuid: 4,
        InfoTypeUuid: '1154691c-a87d-40e5-9a33-946fb0bc1007',
        title: '专利',
        value: '专利',
        unit: '项',
        img: 'TechnologicalInnovationA01_A04.png',
    },
    {
        uuid: 5,
        InfoTypeUuid: '1154691c-a87d-40e5-9a33-946fb0bc1004',
        title: '十项新技术',
        value: '十新技术',
        unit: '项',
        img: 'TechnologicalInnovationA01_A05.png',
    },
    { uuid: 6, InfoTypeUuid: '0', title: '其他', value: '其他', unit: '项', img: 'TechnologicalInnovationA01_A06.png' },
]

const A01Nav = [
    { uuid: 1, title: '按月费用统计' },
    { uuid: 2, title: '按月累计费用统计' },
]

export const TechnologicalInnovationA01 = ({ OrgEvent }) => {
    OrgEvent.useSubscription(val => setOrgActive(val === '00000000-0000-0000-0000-000000000000' ? '' : val))
    const ChartsA01 = useRef()
    const sizeA01 = useSize(ChartsA01)
    const ChartsA02 = useRef()
    const sizeA02 = useSize(ChartsA02)

    const [Active, setActive] = useState(1)
    const [OrgActive, setOrgActive] = useState('')

    const { runAsync: getTop } = useRequest(Http, { manual: true, onSuccess: res => setDataTop(res) })
    const [DataTop, setDataTop] = useState({ 优质工程: 0, qc: 0, 施工工法: 0, 专利: 0, 十新技术: 0, 其他: 0 })

    const [YearA01, setYearA01] = useState(dayjs())
    const [YearA02, setYearA02] = useState(dayjs())

    const { runAsync: getA01A } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA01A(res.list.map(({ 月份, 合计 }) => ({ name: '金额', type: 月份, value: 合计 })))
        },
    })
    const { runAsync: getA01B } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA01B(res.list.map(({ 月份, 合计 }) => ({ name: '金额', type: 月份, value: 合计 })))
        },
    })
    const { runAsync: getA02 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA02(res.list.map(({ 月份, 营业收入, 投入比率 }) => ({ type: 月份, 营业收入, 投入比率 })))
        },
    })

    useEffect(() => {
        getTop({ url: 'getNongkenGetNewScienceStatistics', data: { OrganizationUuid: OrgActive } })
    }, [getTop, OrgActive])
    useEffect(() => {
        getA01A({
            url: 'getNongkenGetResearchDevelopmentByMonth',
            data: { OrganizationUuid: OrgActive, Year: dayjs(YearA01).format('YYYY') },
        })
        getA01B({
            url: 'getNongkenGetResearchDevelopmentLeiJiByMonth',
            data: { OrganizationUuid: OrgActive, Year: dayjs(YearA01).format('YYYY') },
        })
    }, [getA01A, getA01B, OrgActive, YearA01])

    useEffect(() => {
        getA02({
            url: 'getNongkenGetTechnologyInvestmentByMonth',
            data: { OrganizationUuid: OrgActive, Year: dayjs(YearA02).format('YYYY') },
        })
    }, [OrgActive, YearA02, getA02])

    const [DataA01A, setDataA01A] = useState([])
    const [DataA01B, setDataA01B] = useState([])
    const [DataA02, setDataA02] = useState([])

    const [OptionsCall, setOptionsCall] = useState()
    return (
        <div className="TechnologicalInnovationA01">
            <div className="Right">
                <TitleSmall001 title="科技创新统计" />
                <div className="Top">
                    {A01List.map(({ uuid, title, value, unit, img, InfoTypeUuid }) => (
                        <div
                            key={uuid}
                            onClick={() => {
                                if (InfoTypeList[InfoTypeUuid])
                                    setOptionsCall({ type: 'TableList', data: InfoTypeList[InfoTypeUuid] })
                                else
                                    setOptionsCall({
                                        type: 'NewSciencesModalList',
                                        data: { title: '科技创新类目', InfoTypeList: InfoTypeListMapping, width: 400 },
                                    })
                            }}
                        >
                            <div>
                                <img src={WebCommonUrl + 'MaterialTransportationA01_BTM.png'} alt="" />
                                <img src={WebCommonUrl + img} alt="" />
                            </div>
                            <div>
                                <div>{title}</div>
                                <div>
                                    <div>
                                        {DataTop[value]}
                                        <img src={WebCommonUrl + 'MaterialTransportationA01_Num.png'} alt="" />
                                    </div>
                                    <div>{unit}</div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="Btm">
                    <div className="left">
                        <TitleSmall001 title="科研课题费用统计" />
                        <div className="options">
                            <div className="Nav">
                                {A01Nav.map(({ uuid, title }) => (
                                    <div
                                        key={uuid}
                                        className={uuid === Active ? 'active' : ''}
                                        onClick={() => setActive(uuid)}
                                    >
                                        {title}
                                    </div>
                                ))}
                            </div>
                            <div className="TimeSelect">
                                <DatePicker picker="year" defaultValue={YearA01} onChange={setYearA01} />
                            </div>
                        </div>
                        <div
                            className="Charts"
                            ref={ChartsA01}
                            onClick={() => {
                                setOptionsCall({
                                    type: 'TableList',
                                    data: {
                                        type: 'ResearchDevelopmentsModalList',
                                        title: '科研费用详情',
                                        uuid: dayjs(YearA01).format('YYYY'),
                                        OrganizationUuid: OrgActive,
                                    },
                                })
                            }}
                        >
                            {sizeA01 && Active === 1 && (
                                <ColumnConfigA01Template data={DataA01A} size={sizeA01} style={ColumnStyle} />
                            )}
                            {sizeA01 && Active === 2 && (
                                <AreaA01Template data={DataA01B} size={sizeA01} style={AreaStyle} />
                            )}
                        </div>
                    </div>
                    <div className="right">
                        <TitleSmall001 title="科技投入率" />
                        <div className="TimeSelect">
                            <DatePicker picker="year" defaultValue={YearA02} onChange={setYearA02} />
                        </div>
                        <div
                            className="Charts"
                            ref={ChartsA02}
                            onClick={() => {
                                setOptionsCall({
                                    type: 'TableList',
                                    data: {
                                        type: 'TechnologyInvestmentsModalList',
                                        title: '科技投入率详情',
                                        uuid: dayjs(YearA02).format('YYYY'),
                                        OrganizationUuid: OrgActive,
                                    },
                                })
                            }}
                        >
                            {sizeA02 && (
                                <DualAxesA1Template
                                    data={DataA02}
                                    size={sizeA02}
                                    style={{
                                        ...DualAxesStyle,
                                        value: '营业收入',
                                        count: '投入比率',
                                    }}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
